<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6-2.简单的精灵演示程序</title>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
<script type="text/javascript" src="Sprite.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),

		RADIUS = 75,
		ballPainter = {
			paint: function(sprite, context){
				var x = sprite.left + sprite.width/2,
					y = sprite.top + sprite.height/2,
					radius = RADIUS;

					context.save();
					context.beginPath();
					context.arc(x, y, radius, 0, Math.PI*2, false);
					context.clip();

					context.shadowColor = 'rgb(0, 0, 0)';
					context.shadowOffsetX = -4;
					context.shadowOffsetY = -4;
					context.shadowBlur = 8;

					context.lineWidth = 2;
					context.strokeStyle = '#ccc';
					context.fillStyle = 'rgba(30, 144, 255, 0.15)';
					context.fill();
					context.stroke();
					context.restore();
				}
		},
		ball = new Sprite('ball', ballPainter);

	canvas.width = document.documentElement.clientWidth;
	canvas.height = document.documentElement.clientHeight;

	ball.left = 320;
	ball.top = 160;
	ball.paint(context);
</script>
</html>